<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card>
          <div class="card-title">总是显示</div>
          <ve-line
            :height="'120px'"
            :data="chartData"
            :after-config="afterConfig"
            :settings="settings"
            :theme="extend"
          ></ve-line>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="24">
        <el-card>
          总是显示
          <ve-pie :data="chartData" :settings="settings" :extend="extend"></ve-pie>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="24">
        <el-card>
          总是显示
          <div class="ec" ref="echart"></div>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="24">
        <el-card>总是显示</el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "analysis",
  data() {
    return {
      extend: {
        categoryAxis: {
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false }
        },
        valueAxis: {
          axisLine: { show: false }
        },
        line: {
          smooth: true
        },
        legend: {
          show: false
        },
        grid: {
          containLabel: false,
          left: 0,
          top: 0,
          width: "100%",
          height: "100%",
          borderWidth: 0
        },
        animationDuration:500
      },
      settings: {
        area: true
      },
      chartData: {
        columns: ["日期", "访问用户", "下单用户", "下单率"],
        rows: [
          { 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
      }
    };
  },
  methods: {
    afterConfig(opts) {
      //坐标轴两边留白策略
      opts.xAxis[0].boundaryGap = 0;
      opts.xAxis[0].show = false;
      opts.yAxis[0].show = false;
      return opts;
    }
  }
};
</script>

<style lang="scss">
@import "../../element-variables.scss";
.ec {
  height: 200px;
}
.card-title {
  color: $--color-text-secondary;
  font-size: 12px;
}
</style>
